<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="./css/init.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <title>品优购前端项目</title>
</head>
<style>
    body {
        min-width: 1200px;
    }

    /* 顶部广告条 */
    .top_ad {
        background: url(./uploads/top_header.jpg) center center no-repeat;
        height: 80px;
        background-color: black;
    }

    .top_ad>.w {
        /* border: 1px solid red; */
        margin: 0 auto;
        text-align: right;
    }

    .top_ad>.w>a {
        display: inline-block;
        height: 20px;
        width: 20px;
        margin-top: 5px;
        margin-right: 5px;
    }

    /* 主导航条 */
    .top_nav {
        line-height: 30px;
        background-color: #e5e5e3;
    }

    .top_nav>.w {
        height: 30px;
        /* border: 1px solid red; */
    }

    .top_nav>.w>.left {
        float: left;
    }

    .top_nav>.w>.left>a.reg {
        color: red;
    }

    .top_nav>.w>.right {
        float: right;
        color: #ccc;
    }

    .top_nav>.w>.right>a {
        padding: 0 5px;
    }

    .top_nav>.w>.right>a:hover>i {
        color: red;
    }

    /* logo区域 */
    .logo_search {
        height: 105px;
        /* line-height: 105px; */
    }

    .logo_search .left {
        width: 210px;
        float: left;
    }

    .logo_search .left a {
        line-height: 105px;
    }

    .logo_search .left a img {
        vertical-align: middle;
    }

    .logo_search .center {
        float: left;
        margin-left: 180px;
        width: 525px;
        margin-top: 22px;
    }

    .logo_search .center input {
        float: left;
        border: red solid 1px;
    }

    .logo_search .center input[type="text"] {
        width: 445px;
        height: 30px;
        text-indent: 1em;
    }

    .logo_search .center input[type="submit"] {
        width: 60px;
        height: 32px;
        background-color: red;
    }

    .logo_search .center p a {
        margin: 0 5px;
    }

    .logo_search .center i {
        position: relative;
        right: 38px;
        line-height: 30px;
        color: white;
        /* font-weight: bold; */
        cursor: pointer;
    }

    .logo_search .right {
        float: left;
        width: 188px;
        height: 30px;
        border: 1px solid #ccc;
        margin-top: 22px;
        margin-left: 35px;
        text-align: center;
        line-height: 30px;
        position: relative;
    }

    .logo_search .right i {
        color: red;
    }

    .logo_search .right span {
        background: red;
        position: absolute;
        left: 145px;
        top: -5px;
        height: 1em;
        line-height: 1em;
        color: white;
        padding: 3px;
        border-radius: 10px 10px 10px 0;
    }

    /* 商品分类区 */
    .nav2 {
        height: 45px;
        border-bottom: solid 2px #ca0000;
    }

    .nav2>.w {
        /* background-color: pink; */
        height: 45px;
        line-height: 45px;
    }

    .nav2>.w>.left {
        float: left;
        width: 210px;
        background-color: #ca0000;
        color: white;
        font-size: 18px;
        font-weight: bolder;
        text-align: center;
    }

    .nav2>.w>.right {
        float: left;
        margin-left: 35px;
    }

    .nav2>.w>.right>li {
        float: left;
        padding-right: 25px;
    }

    .nav2>.w>.right>li>a {
        font-size: 18px;
        font-weight: bolder;
    }

    .nav2>a {
        display: block;
        text-align: center;
        /* border: solid 5px red; */
        background: url(./uploads/jd_bg.png) center center no-repeat;
        height: 470px;
        position: relative;
        /* top: 0; */
    }

    /* 主体区域 */
    /* 主体1区 */
    .main1 {
        height: 465px;
        /* background-color: rgb(247, 116, 116); */
        position: relative;
        overflow: hidden;
    }

    .main1>.left {
        float: left;
        width: 210px;
        height: 467px;
        background-color: #e20000;
        position: relative;
        top: -2px;
    }

    .main1>.center {
        float: left;
        margin-top: 10px;
        margin-left: 5px;
    }

    .main1>.right {
        float: right;
        width: 250px;
        height: 453px;
        border: solid 1px gray;
        margin-top: 10px;
        background: white;
    }

    .main1>.right .right1 {
        height: 160px;
        background-color: rgb(247, 93, 93);
    }

    .main1>.right .right2 {
        margin: 4px 0;
        height: 210px;
    }

    .main1>.right .right2 li {
        float: left;
        width: 62px;
        height: 69px;
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        text-align: center;
    }

    .main1>.right .right2 li a {
        display: inline-block;
        /* margin: 0 auto; */
        text-align: center;
    }

    .main1>.right .right2 li a p {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .main1>.right .right2 li a p:nth-child(1) {
        background: url(images/icons.png) no-repeat;
    }

    .main1>.right .right2 li:nth-child(1) a p:nth-child(1) {
        background-position: -13px -10px;
    }

    .main1>.right .right2 li:nth-child(2) a p:nth-child(1) {
        background-position: -76px -10px;
    }

    .main1>.right .right2 li:nth-child(3) a p:nth-child(1) {
        background-position: -139px -10px;
    }

    .main1>.right .right2 li:nth-child(4) a p:nth-child(1) {
        background-position: -203px -10px;
    }

    .main1>.right .right2 li:nth-child(5) a p:nth-child(1) {
        background-position: -13px -80px;
    }

    .main1>.right .right2 li:nth-child(6) a p:nth-child(1) {
        background-position: -13px -153px;
    }

    .main1>.right .right2 li:nth-child(7) a p:nth-child(1) {
        background-position: -13px -81px;
    }

    .main1>.right .right2 li:nth-child(8) a p:nth-child(1) {
        background-position: -77px -10px;
    }

    .main1>.right .right2 li:nth-child(9) a p:nth-child(1) {
        background-position: -13px -153px;
    }

    .main1>.right .right2 li:nth-child(10) a p:nth-child(1) {
        background-position: -13px -153px;
    }

    .main1>.right .right2 li:nth-child(11) a p:nth-child(1) {
        background-position: -13px -153px;
    }

    .main1>.right .right2 li:nth-child(12) a p:nth-child(1) {
        background-position: -13px -153px;
    }

    .main1>.right .right2 li:nth-child(4n) {
        width: 61px;
        border-right: 0px;
    }

    .main1>.right .right3 {
        height: 75px;
        background: pink;
    }

    /* 主体2区 */
    .main2 {
        margin: 15px 0px;
    }

    .main2>.left {
        float: left;
        width: 200px;
        height: 163px;
        background-color: #604f4b;

        text-align: center;

    }

    .main2>.left img {
        padding-top: 40px;

    }

    .main .left p {
        font-size: 18px;
        font-weight: bolder;
        color: white;

    }

    .main2>.right {
        float: left;
        width: 1000px;
        height: 163px;
        background-color: #ebebeb;
        column-width: 248px;
        column-gap: 2px;
        column-rule: gray 1px solid;
        padding: 9px 0;
        box-sizing: border-box;
    }


    /* 主体3区 */
    .main3 {
        line-height: 3em;
        /* border-bottom: #604f4b 1px solid; */
    }

    .main3 .main3a {
        border-bottom: solid 2px red;
    }

    .main3 .main3a .right {
        float: right;
    }

    .main3 .main3a .right a {
        margin: 0 6px;
    }

    .main3 .main3a a b {
        font-weight: bold;
    }

    .main3 .main3b {
        /* background-color: pink; */
        height: 360px;
    }

    .main3 .main3b div {
        height: 360px;
        width: 221px;
        float: left;
        border-right: #ca0000 solid 1px;
    }

    .main3 .main3b div:nth-child(1) {
        width: 187px;
        border-right: none;
    }

    .main3 .main3b div:nth-child(1) ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 22px;
    }

    .main3 .main3b div:nth-child(1) ul>li {
        border-bottom: 1px solid gray;
        width: 90px;
        text-align: center;
    }

    .main3 .main3b div:nth-child(2) {
        width: 329px;
        border-right: none;
        margin-left: 18px;
    }

    .main3 .main3b .btmline {
        border-bottom: #ca0000 solid 1px;
    }

    .main3 .main3b div:nth-child(3) {
        line-height: 0;
    }

    .main3 .main3b div:nth-child(5) {
        border-right: none;
        line-height: 0;
    }

    .main4 {}

    /* 底部 */
    footer {
        background-color: #e0dedb;
    }

    footer .footer1 {
        height: 70px;
        border-bottom: 1px solid #ccc;
        display: flex;
        padding-top: 40px;
    }

    footer .footer1 div {
        width: 198px;
        margin-left: 40px;
        height: 70px;
    }

    footer .footer1 div span {
        width: 51px;
        height: 52px;
        background-color: red;
        display: inline-block;
        float: left;
        background: url(./images/icons.png) -253px 0px no-repeat ;
    }
    footer .footer1 div  h3{
        float: left;
        width: 145px;
        margin: 5px 0 8px;
        font-size: 16px;
        font-weight: bold;
    }
    footer .footer1 div span p{
        float: left;
    }
</style>

<body>
    <!-- 顶部广告 -->
    <div class="top_ad">
        <div class="w">
            <a href="">
                <img src="./uploads/矩形8.png" alt="关闭广告" title="关闭广告">
            </a>
        </div>
    </div>
    <!-- 主导航条 -->
    <nav class="top_nav">
        <div class="w clear">
            <div class="left">
                欢迎来到品优购!
                请<a href="">登录</a>
                <a href="" class="reg">免费注册</a>
            </div>
            <div class="right">
                <a href="">我的订单 <i class="iconfont icon-xiangxiajiantou"></i> </a>|
                <a href="">我的订单</a>|
                <a href="">我的订单<i class="iconfont icon-xiangxiajiantou"></i></a>|
                <a href="">我的订单</a>|
                <a href="">我的订单</a>|
                <a href="">我的订单<i class="iconfont icon-xiangxiajiantou"></i></a>|
                <a href="">我的订单</a>|
                <a href="">我的订单</a>|
            </div>
        </div>
    </nav>
    <!-- logo区域 -->
    <div class="logo_search w clear">
        <div class="left">
            <a href="">
                <img src="images/logo.png" alt="">
            </a>
        </div>
        <div class="center">
            <div class="clear">
                <input placeholder="黑3手机" type="text">
                <input type="submit" value="">
                <i class="iconfont icon-sousuo"></i>
            </div>
            <p>
                <a href="">优惠券首发</a>
                <a href="">优惠券首发</a>
                <a href="">优惠券首发</a>
                <a href="">优惠券首发</a>
                <a href="">优惠券首发</a>
            </p>
        </div>
        <div class="right">
            <a href="">
                <i class="iconfont icon-gouwuche"></i>
                我的购物车&gt;
            </a>
            <span>18</span>
        </div>
    </div>
    <!-- 商品分类区域 -->
    <div class="nav2">
        <div class="w clear">
            <div class="left">全部商品分类</div>
            <ul class="right">
                <li><a href="">服装城</a></li>
                <li><a href="">家用电器</a></li>
                <li><a href="">家居生活</a></li>
                <li><a href="">汽车</a></li>
                <li><a href="">服装城</a></li>
                <li><a href="">运动户外</a></li>
                <li><a href="">服装城</a></li>
            </ul>
        </div>
        <a href=""></a>
    </div>
    <!-- 主体区域 -->
    <div class="main w">
        <!-- 主体1区 -->
        <div class="main1 clear">
            <aside class="left">11</aside>
            <aside class="right">
                <div class="right1">1</div>
                <ul class="right2 clear">
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>
                    <li><a href="#">
                            <p></p>
                            <p>话费</p>
                        </a></li>

                </ul>
                <div class="right3">3</div>
            </aside>
            <aside class="center">
                <img src="./uploads/banner.jpg" alt="">
            </aside>
        </div>
        <!-- 主体2区 -->
        <div class="main2 clear">
            <div class="left">
                <img src="images/clock.png" alt="">
                <p>今日推荐</p>
            </div>
            <div class="right">
                <img src="uploads/re-img1.jpg" alt="">
                <img src="uploads/re-img1.jpg" alt="">
                <img src="uploads/re-img1.jpg" alt="">
                <img src="uploads/re-img1.jpg" alt="">
            </div>
        </div>
        <!-- 主体3区 -->
        <div class="main3">
            <div class="main3a clear">
                <a href=""> <b>家用电器</b> </a>
                <div class="right">
                    <a href="">大家电</a>|
                    <a href="">大家电</a>|
                    <a href="">大家电</a>|
                    <a href="">大家电</a>|
                    <a href="">大家电</a>|
                    <a href="">大家电</a>|
                    <a href="">大家电</a>|
                    <a href="">大家电</a>
                </div>
            </div>
            <div class="main3b clear">
                <div>
                    <ul>
                        <li><a href="">节能补贴</a></li>
                        <li><a href="">节能补贴</a></li>
                        <li><a href="">节能补贴</a></li>
                        <li><a href="">节能补贴</a></li>
                        <li><a href="">节能补贴</a></li>
                        <li><a href="">节能补贴</a></li>
                    </ul>
                    <a href="">
                        <img src="uploads/floor-1-1.png" alt="">
                    </a>
                </div>
                <div><img src="./uploads/floor-1-b01.png" alt=""></div>
                <div>
                    <a href="">
                        <img class="btmline" src="./uploads/floor-1-2.png" alt="">
                    </a>
                    <a href="">
                        <img src="./uploads/floor-1-3.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="">
                        <img src="./uploads/floor-1-4.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="">
                        <img class="btmline" src="./uploads/floor-1-6.png" alt="">
                    </a><a href="">
                        <img src="./uploads/floor-1-6.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="main4">4</div>
    </div>
    <footer>
        <div class="w">
            <div class="footer1">
                <div>
                    <span>
                    </span>
                    <h3>正品保障</h3>
                    <p>正品保障,提供发票</p>
                </div>
                <div>
                    <span>
                    </span>
                    <h3>正品保障</h3>
                    <p>正品保障,提供发票</p>
                </div>
                <div>
                    <span>
                    </span>
                    <h3>正品保障</h3>
                    <p>正品保障,提供发票</p>
                </div>
                <div>
                    <span>
                    </span>
                    <h3>正品保障</h3>
                    <p>正品保障,提供发票</p>
                </div>
                <div>
                    <span>
                    </span>
                    <h3>正品保障</h3>
                    <p>正品保障,提供发票</p>
                </div>

            </div>
            <div class="footer2">2</div>
            <div class="footer3">3</div>
        </div>
    </footer>
</body>

</html>